<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <el-tabs v-model="activeTab" @tab-click="handleClick">
                <el-tab-pane label="选品超市" name="selectionSupermarket">
                    <selectionSupermarket v-if="activeTab == 'selectionSupermarket'"/>
                </el-tab-pane>
                <el-tab-pane label="预约历史" name="appointmentHistory">
                    w
                </el-tab-pane>
            </el-tabs>
        </transition>
    </div>
</template>
<script setup name="SelectionSupermarket" lang="ts">
import type { TabsPaneContext } from 'element-plus'
import selectionSupermarket from './components/selectionSupermarket.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const activeTab = ref('selectionSupermarket');

/**
 * tabs切换
 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.name, event)
    
};

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}
</style>